<template>
  <div class="dashboard_editor_container">
    <div class="right_con">
      <div class="right_top_con">
        <div class="right_chart_top_con">
          <div class="button_con">
            <el-button
              type="primary"
              :disabled="startDis"
              @click="clickParamVis"
            >启动测试</el-button
            >
            <el-button :disabled="endDis" @click="endFun">
                停止测试
              </el-button>
            <el-button
              v-if="elStatus"
              type="primary"
              :disabled="defaultMeasureVis"
              @click="setDefaultMeasure"
            >设置参考曲线</el-button
            >
            <!-- <el-button @click="recoveryRatio" :disabled="dataZoomVis"
              >重置缩放</el-button
            > -->
            <!-- <div v-if="elStatus" class="hint_con">红色为A线 , 绿色线为B线</div> -->
          </div>
          <div class="device_info_con">
            {{ "设备" }}:{{ deviceNo }} ;
            {{ "通道" }}:{{ channel }}
          </div>
          <div class="return_con">
            <el-button type="primary" @click="returnFun">
                返回
              </el-button>
          </div>
        </div>
        <div class="chart_tow_top_con">
          <div class="button_con">
            <el-button
              type="primary"
              @click="recoveryRatio"
              :disabled="dataZoomVis"
            >1:1</el-button
            >
            <el-button
              type="primary"
              :disabled="aLineShow"
              @click="showLine('a')"
              round
              ref="aButton"
            >A</el-button
            >
            <el-button
              type="primary"
              :disabled="bLineShow"
              @click="showLine('b')"
              round
              ref="bButton"
            >B</el-button
            >
          </div>
        </div>
        <div class="chart_con">
          <measure-line-chart
            :chart-data="lineChartData"
            :elStatus="elStatus"
            :startPoint="startPoint"
            :endPoint="endPoint"
            :tableData="tableData"
            :startDis="startDis"
            ref="lineChart"
          />
        </div>
      </div>
      <div class="progress_con">
        <progressSecond
          ref="progressSecond"
          :startGetWd="startGetWd"
          :endDis="endDis"
          :test_time="test_time"
        ></progressSecond>
      </div>
      <div class="right_bottom_con">
        <div class="right_bottom_left">
          <el-table
            :data="tableData"
            height="100%"
            border
            style="width: 100%"
            @row-click="currentChange"
            class="el_table"
            align="center"
            header-align="center"
          >
            <el-table-column
              prop="type"
              label="类型"
              align="center"
              width="70"
            >
              <template slot-scope="scope">
                <img :src="iconFun(scope.row)" alt="" class="test_img_con" />
              </template>
            </el-table-column>
            <el-table-column
              prop="index"
              label="序号"
              width="70"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="startDist"
              label="距离(KM)"
              align="center"
            >
              <template slot-scope="scope">
                <span>{{ fixFun(scope.row.startDist) }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="insertLoss"
              label="损耗(dB)"
              align="center"
            >
              <template slot-scope="scope">
                <span>{{ fixFun(scope.row.insertLoss) }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="returnLoss"
              label="反射率(dB)"
              align="center"
            >
              <template slot-scope="scope">
                <span>{{ fixFun(scope.row.returnLoss) }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="segAvgAtten"
              label="衰减(dB/KM)"
              align="center"
            >
              <template slot-scope="scope">
                <span>{{ fixFun(scope.row.segAvgAtten) }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="segAtten"
              label="总损耗(dB)"
              align="center"
            >
              <template slot-scope="scope">
                <span>{{ fixFun(scope.row.segAtten) }}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="text_result_con">
          <div class="param_result_title">
            测试结果
          </div>
          <div class="flex_con">
            <div class="right_bottom_right">
              <div class="left_bottom_con height_100">
                <div class="table_item_big">
                  <div class="table_left_con">
                    全程衰耗(dB)
                  </div>
                  <div class="table_right_con">
                    {{ fixFun(elData.wholeLevel, "blank") }}
                  </div>
                </div>
                <div class="table_item_big">
                  <div class="table_left_con">
                    全程长度(KM)
                  </div>
                  <div class="table_right_con">
                    {{ lengthShowFun(elData.wholeLen, "blank") }}
                  </div>
                </div>
                <div class="table_item_big">
                  <div class="table_last_con">
                    <div>全程均耗</div>
                    <div>(dB/KM)</div>
                  </div>
                  <div class="table_right_con">
                    {{ fixFun(elData.uniformLoss, "blank") }}
                  </div>
                </div>
              </div>
            </div>
            <div class="right_bottom_right">
              <div class="left_bottom_con height_100">
                <div class="table_item_big">
                  <div class="table_left_con border_left">
                    AB 衰耗 (dB)
                  </div>
                  <div class="table_right_con">
                    {{ fixFun(elData.abPadControl, "blank") }}
                  </div>
                </div>
                <div class="table_item_big">
                  <div class="table_left_con border_left">
                    AB 长度 ({{
                      elData.abLength > 1000 ? "KM" : "M"
                    }})
                  </div>
                  <div class="table_right_con">
                    {{ lengthShowFun(elData.abLength, "blank") }}
                  </div>
                </div>
                <div class="table_item_big">
                  <div class="table_last_con border_left">
                    <div>AB 全程均耗</div>
                    <div>(dB/KM)</div>
                  </div>
                  <div class="table_right_con">
                    {{ fixFun(elData.abUniformLoss, "blank") }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="param_con">
          <div class="param_result_title">
            测试参数
          </div>
          <div class="flex_con">
            <div class="param_item_con">
              <div class="flex_param_con">
                <div class="flex_title_con">
                  测试量程(米) :
                </div>
                <div class="flex_text_con border_right">
                  {{
                    requestParam.paramRd == 0
                      ? "自动"
                      : requestParam.paramRd
                  }}
                </div>
              </div>
              <div class="flex_param_con">
                <div class="flex_title_con">
                  测试脉宽(ns) :
                </div>
                <div class="flex_text_con border_right">
                  {{
                    requestParam.paramPw == 0
                      ? "自动"
                      : requestParam.paramPw
                  }}
                </div>
              </div>
              <div class="flex_param_con">
                <div class="flex_title_con">
                  测试波长(nm)
                </div>
                <div class="flex_text_con border_right">
                  {{ requestParam.paramWaveLength }}
                </div>
              </div>
              <div class="flex_param_con">
                <div class="flex_title_con">
                  折射率 :
                </div>
                <div class="flex_text_con border_right">
                  {{ fixFun(requestParam.paramIor, "blank") }}
                </div>
              </div>
            </div>
            <div class="param_item_con">
              <div class="flex_param_con">
                <div class="flex_title_con">
                  回散系数(dB) :
                </div>
                <div class="flex_text_con">
                  {{ requestParam.paramBackScatter }}
                </div>
              </div>
              <div class="flex_param_con">
                <div class="flex_title_con">
                  结束门限(dB) :
                </div>
                <div class="flex_text_con">
                  {{ requestParam.paramFinalThreshold }}
                </div>
              </div>
              <div class="flex_param_con">
                <div class="flex_title_con">
                  反射门限(dB) :
                </div>
                <div class="flex_text_con">
                  {{ fixFun(requestParam.paramReflectThreshold, "blank") }}
                </div>
              </div>
              <div class="flex_param_con">
                <div class="flex_title_con">
                  非反射门限(dB) :
                </div>
                <div class="flex_text_con">
                  {{ fixFun(requestParam.paramNonReflectThreshold, "blank") }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="dia_log_con" v-show="testParamVis">
      <div class="param_main_con">
        <div class="param_top_con">
          <div class="param_title_con">
            测试参数
          </div>
          <div class="param_cencel_con">
            <el-button
              round
              icon="el-icon-error "
              @click="testParamVis = false"
            ></el-button>
          </div>
        </div>
        <equi-parma
          ref="equiParam"
          :equiData="equiData"
          @startFun="startFun"
          :channel="channel"
          :deviceNo="deviceNo"
          :testParamVis="testParamVis"
        ></equi-parma>
      </div>
    </div>
  </div>
</template>

<script>
import Paho from "paho-mqtt";
import pako from "pako";
import MeasureLineChart from "@/views/dashboard/MeasureLineChart";
import progressSecond from "@/views/components/device/progressSecond.vue";
import equiParma from "@/views/components/device/equiParma.vue";

import startTestPic from "@/assets/images/device/startTest.png";
import endTest from "@/assets/images/device/endTest.png";
import gainTest from "@/assets/images/device/gainTest.png";
import dampingTest from "@/assets/images/device/dampingTest.png";
import reflectTest from "@/assets/images/device/reflectTest.png";
import sectionTest from "@/assets/images/device/sectionTest.png";

import {startTest} from "@/api/base/jobDispatch";
import {setDefaultMeasure} from "@/api/base/circuitMeasure";

var deviceId = null; //设备id
let topic = "";
var measureId = null; //设置成参考曲线的id
var fromName = ""; //点击测试的用户名  其形式为   用户名 + -pc- + 时间戳
var testNum = 0; //在页面中 点击测试按钮的数量
export default {
  name: "rollCallTest",
  components: {
    equiParma,
    MeasureLineChart,
    progressSecond
  },
  data(){
    return {
      client: new Paho.Client(process.env.VUE_APP_MQTT_URL, "web" + Date.now()),
      deviceNo: null,
      channel: null,
      lineChartData: {
        xData: [],
        seriesData: [],
      },
      elData: {}, //展示的数据对象
      tableData: [], //表格的信息
      startDis: true, //开始测试是否可以点击
      endDis: true, //停止测试是否可以点击
      elStatus: false, //如果为true, 说明测试已经完成, 是el状态
      defaultMeasureVis: true, //是否可以点击参考曲线按钮
      startPoint: 99999999, //线起点的位置
      endPoint: 0, //终点的点位,  是X轴的第多少个点
      testParamVis: false, //测试参数的弹框

      equiData: {
        pluswidth_table: [],
        testpara_table: [],
        wave_lengthArr: [],
      },
      requestParam: {}, //点名测试的参数
      dataZoomVis: true, //重置缩放的按钮
      aLineShow: true,
      bLineShow: true, ///a b线如果在视野外, 则可操作按钮, 操作后ab线可见
      startGetWd: false, //第一包数据返回时候 开始为true
      test_time: 0, //测试时间
    }
  },
  created: function (){
    fromName = this.$store.state.user.name + "-pc-" + Date.now();
    testNum = 0;
    deviceId = this.$route.query.deviceId;
    this.deviceNo = this.$route.query.deviceNo;
    this.channel = parseInt(this.$route.query.channel);

    this.client.connect({
      onSuccess: this.onConnect,
      userName: process.env.VUE_APP_USERNAME,
      password: process.env.VUE_APP_PASSWORD,
    });
    this.client.onConnectedLost = this.onConnectedLost;
    this.client.onMessageArrived = this.onMessageArrived;

    topic = `$FAMS/OTU/${this.deviceNo}/ctrl-down`;
  },
  activated() {
    fromName = this.$store.state.user.name + "-pc-" + Date.now();
    testNum = 0;
    deviceId = this.$route.query.deviceId;
    this.deviceNo = this.$route.query.deviceNo;
    this.channel = parseInt(this.$route.query.channel);
  },
  methods: {
    onConnect: function onConnect() {
      //连接成功
      let that = this;
      let param = {
        onSuccess: () => {
          that.equiPublish();
        },
      };
      that.client.subscribe(`$FAMS/OTU/${that.deviceNo}/ctrl-up`, param);
    },
    onConnectedLost: function (responseObject) {
      this.$modal.msgWarning("连接断开");
    },
    onMessageArrived: function (message) {
      //返回消息
      let that = this;
      let dataMid = JSON.parse(message.payloadString);
      if (dataMid.to === fromName) {
        if(dataMid.cmd === "get_dev_info"){
          this.equiData.testpara_table = ["自动"];
          let midArr = dataMid.response.otdr.testpara_table;
          midArr.forEach((e) => {
            this.equiData.testpara_table.push(e[0]);
          });
          this.equiData.pluswidth_table = dataMid.response.otdr.pluswidth_table;
          this.equiData.pluswidth_table.unshift("自动");
          this.equiData.wave_lengthArr = dataMid.response.otdr.wave_lengthArr;
          //获取设备信息命令=
          this.startDis = false;
        }
        else if(dataMid.cmd === "start_otdr_measure"){
          //  测试设备是否报警 ,返回消息根据状态码 , 给出提示
          if (dataMid.response.start_result == 0) {
            that.$modal.msgWarning("模块繁忙");
          } else if (dataMid.response.start_result == 1) {
          } else if (dataMid.response.start_result == -1) {
            that.$modal.msgWarning("OT故障");
          } else if (dataMid.response.start_result == -2) {
            that.$modal.msgWarning("OSW故障");
          } else if (dataMid.response.start_result == -3) {
            that.$modal.msgWarning("OSW无效");
          }
          that.endDis = false;
        }
        else if(dataMid.cmd === "get_wd"){
//获取波形  startDis
          this.startGetWd = true;
          if (that.endDis === true) {
            //如果状态为el , 停止刷新图形
            return false;
          } else {
            that.lineChartData.xData = {};
            that.lineChartData.seriesData = {};
            let { PKP, point_cnt, PW, RD } = dataMid.response;
            let xData = [];
            for (let i = 0; i < point_cnt * PKP; i += PKP) {
              xData.push(i);
            }
            that.lineChartData.xData = xData;
            that.lineChartData.seriesData = that.pako_unzip(
              dataMid.response.wave
            );
          }
        }
        else if(dataMid.cmd === "stop_measure"){

        }
        else if(dataMid.cmd === "report_wd&el"){
          that.startDis = false;
          that.startGetWd = false;
          that.lineChartData.xData = {};
          that.lineChartData.seriesData = {};
          that.endDis = true;
          let {
            PKP,
            point_cnt,
            wave,
            waveLength,
            IOR,
            backScatter,
            reflectThreshold,
            nonReflectThreshold,
            finalThreshold,
            RD,
            PW,
          } = dataMid.report;
          that.requestParam = {
            paramWaveLength: waveLength, //波长，单位：nm
            paramRd: RD, //量程，单位：米,
            paramPw: PW, //脉宽，单位：ns ---------------
            paramIor: IOR, //折射率
            paramBackScatter: backScatter,
            paramNonReflectThreshold: nonReflectThreshold,
            paramReflectThreshold: reflectThreshold,
            paramFinalThreshold: finalThreshold,
          };
          let xData = [];
          for (let i = 0; i < point_cnt * PKP; i += PKP) {
            xData.push(i);
          }
          that.lineChartData.xData = xData;
          that.lineChartData.seriesData = that.pako_unzip(wave);
          that.elStatus = true;
          that.defaultMeasureVis = false;
          that.tableData = [];
          that.elData = dataMid.report;
          let startLen = 0;
          let endLen = 0;
          let startLevel = 0;
          let endLevel = 0;
          let midArrOne = [];
          for (let i = 0; i < dataMid.report.event_cnt; i++) {
            midArrOne.push(dataMid.report["event" + i]);
            if (dataMid.report["event" + i].type === 1) {
              //起始
              startLen = dataMid.report["event" + i].startDist;
              startLevel = dataMid.report["event" + i].startLevel;
              // that.startPoint = dataMid.report["event" + i].startLocation;
              that.startPoint = that.findClosestValueSorted(
                dataMid.report["event" + i].startDist
              );
            }
            if (dataMid.report["event" + i].type === 2) {
              //终点
              endLen = dataMid.report["event" + i].startDist;
              endLevel = dataMid.report["event" + i].startLevel;
              // that.endPoint = dataMid.report["event" + i].startLocation;
              that.endPoint = that.findClosestValueSorted(
                dataMid.report["event" + i].startDist
              );
              that.abCalcFun(0, that.endPoint);
            }
          }
          let segAttenShow = 0;
          let typeCurrent = 10000;
          for (let i = 0; i < midArrOne.length; i++) {
            if (i === 0) {
              segAttenShow = 0;
            } else {
              if (midArrOne[i].type === 2) {
                typeCurrent = i;
                if (
                  !midArrOne[i].insertLoss ||
                  midArrOne[i].insertLoss === "null"
                ) {
                  segAttenShow = objOne.segAtten;
                } else {
                  segAttenShow = midArrOne[i].insertLoss + objOne.segAtten;
                }
              } else if (i > typeCurrent) {
                segAttenShow = "-";
              } else {
                if (
                  !midArrOne[i].insertLoss ||
                  midArrOne[i].insertLoss === "null"
                ) {
                  segAttenShow = objOne.segAtten;
                } else {
                  segAttenShow = midArrOne[i].insertLoss + objOne.segAtten;
                }
              }
              if (i > typeCurrent) {
                midArrOne[i].returnLoss = "-";
              }
            }
            midArrOne[i].segAtten = segAttenShow;
            midArrOne[i].segAvgAtten = "-"; //是衰减的显示
            that.tableData.push(midArrOne[i]);
            if (i !== midArrOne.length - 1) {
              let segAttenMid = 0;
              if (i >= typeCurrent) {
                segAttenMid = "-";
              } else {
                segAttenMid = midArrOne[i].segAtten + midArrOne[i + 1].segAtten;
              }
              var objOne = {
                type: 9,
                current: i * 2 + 1,
                startLocation: midArrOne[i].startLocation,
                index: "-",
                startDist: midArrOne[i + 1].startDist - midArrOne[i].startDist,
                insertLoss: midArrOne[i + 1].segAtten,
                returnLoss: "-",
                segAvgAtten: midArrOne[i + 1].segAvgAtten,
                segAtten: segAttenMid,
              };
              that.tableData.push(objOne);
            }
          }
          that.elData.wholeLevel = startLevel - endLevel;
          that.elData.wholeLen = (endLen - startLen) * 1000;
          if (endLen - startLen === 0) {
            that.elData.uniformLoss = 0;
          } else {
            that.elData.uniformLoss = (
              that.elData.wholeLevel /
              (that.elData.wholeLen > 1000
                ? that.elData.wholeLen / 1000
                : that.elData.wholeLen)
            ).toFixed(3);
          }
        }
      }
    },
    findClosestValueSorted(porp) {
      //计算是第多少个点位
      //获取与x值最近的值, 从而获取到y值
      let that = this;
      let target = porp * 1000;
      // console.log(target, "---------------", that.lineChartData);
      let arr = that.lineChartData.xData;
      if (!arr || arr.length === 0) return null; // 如果数组为空，返回 null
      let start = 0;
      let end = arr.length - 1;
      // 二分查找
      while (start <= end) {
        const mid = Math.floor((start + end) / 2);
        if (arr[mid] === target) {
          return arr[mid]; // 如果找到了目标值，直接返回
        } else if (arr[mid] < target) {
          start = mid + 1;
        } else {
          end = mid - 1;
        }
      }
      // 检查最近的两个候选值
      const closestStart = arr[end];
      const closestEnd = arr[start];
      // 返回与目标值最接近的值
      let targetVal = 0;
      if (end >= 0 && start < arr.length) {
        Math.abs(target - closestStart) <= Math.abs(closestEnd - target)
          ? (targetVal = closestStart)
          : (targetVal = closestEnd);
      } else if (end >= 0) {
        targetVal = closestStart;
      } else {
        targetVal = closestEnd;
      }
      let valIndex = 0;
      for (let i = 0; i < arr.length; i++) {
        if (arr[i] === targetVal) {
          return (valIndex = i);
        }
      }
    },
    equiPublish() {
      //获取设备信息
      if (this.client.isConnected()) {
        //设备定义
        let param = {
          cmd: "get_dev_info",
          from: fromName,
          moduleId: " ",
          to: this.deviceNo,
          uniId: 1,
        };
        this.client.publish(topic, JSON.stringify(param)); //发布
      } else {
        this.$modal.msgWarning("连接已经断开");
      }
    },
    pako_unzip(data) {
      // pako解压
      let charData = atob(data)
        .split("")
        .map(function (x) {
          return x.charCodeAt(0);
        });
      let binData = new Uint8Array(charData);
      // console.log("开始", binData);
      let str = pako.inflate(binData, { to: "string" });
      // console.log("值", str);
      const chunks = str.match(/.{1,4}/g) || []; // 使用正则表达式来匹配每四个字符
      const decimalValues = chunks.map((hex) => {
        // 将十六进制字符串转换为十进制数字
        const decimal = parseInt(hex, 16);
        return decimal;
      });
      let midArr = [];
      decimalValues.forEach((e) => {
        midArr.push(e / 1000); //将值除以 1000
      });
      return midArr;
    },
    iconFun(e) {
      //表格显示图标
      if (e.type == 1) {
        return startTestPic;
      } else if (e.type == 2) {
        return endTest;
      } else if (e.type == 3) {
        return reflectTest;
      } else if (e.type == 4) {
        return dampingTest;
      } else if (e.type == 5) {
        return gainTest;
      } else {
        return sectionTest;
      }
    },
    startFun(formdata) {
      //开始测试
      let that = this;
      that.requestParam = {};
      that.startPoint = 99999999;
      that.endPoint = 0;
      that.lineChartData = {
        xData: [],
        seriesData: [],
      };
      that.$refs.progressSecond.testStartFun();
      that.showMapVis = false;
      that.startDis = true;
      that.testParamVis = false;
      that.aLineShow = true;
      that.bLineShow = true;
      testNum++;
      if (testNum > 1) {
        that.$refs.lineChart.startFun();
      }
      that.elData = {};
      if (that.client.isConnected()) {
        this.test_time = this.$refs.equiParam.formdata.test_time;
        let param = {
          paramWaveLength: formdata.wave_length || 1550, //波长，单位：nm
          paramRd:
            formdata.range_dist === "自动"
              ? 0
              : formdata.range_dist, //量程，单位：米,
          paramPw:
            formdata.plus_width === "自动"
              ? 0
              : formdata.plus_width, //脉宽，单位：ns ---------------
          paramTestTime: formdata.test_time || 15, //测试时间，单位：秒
          paramTestMode: 0, //测试模式，1:实时;0: 平均;
          paramIor: formdata.IOR || 1.4671, //折射率
          paramBackScatter: formdata.back_scatter || 0,
          paramNonReflectThreshold: formdata.non_reflect_threashold || 0,
          paramReflectThreshold: formdata.reflect_threashold || 0,
          paramFinalThreshold: formdata.final_threashold || 0,
          channel: that.channel,
          deviceNo: that.deviceNo,
          type: 1,
          from: fromName, //  用户名 + pc + 时间戳
        };
        that.elStatus = false;
        that.tableData = [];
        startTest(param).then((res) => {
          //res.data.measureId 是参考曲线的id , 在曲线生成后, 显示   是否设置参考曲线按钮
          measureId = res.data.measureId;
        }); //发送请求  后台记录测试信息 equiList.lost
      } else {
        that.$modal.msgWarning("连接已经断开");
      }
    },
    endFun() {
      //停止测试
      this.startDis = false;
      if (this.client.isConnected()) {
        let param = {
          cmd: "stop_measure",
          from: fromName,
          moduleId: " ",
          to: this.deviceNo,
          uniId: 1,
        };
        this.client.publish(topic, JSON.stringify(param)); //停止获取波形
      } else {
        this.$modal.msgWarning("连接已经断开");
      }
    },
    returnFun() {
      //返回上一页
      this.$router.go(-1);
    },
    currentChange(e) {
      //点击事件表格 单项
      if (e.current) {
        // 是序号 - 的事件
        this.startPoint = this.findClosestValueSorted(e.startDist);
        this.endPoint = this.findClosestValueSorted(
          this.tableData[e.current + 1].startDist
        );
      } else {
        //是正常事件
        this.startPoint = this.findClosestValueSorted(e.startDist);
        this.endPoint = this.findClosestValueSorted(e.startDist);
      }
      this.abCalcFun(this.startPoint, this.endPoint);
    },
    //计算AB线的数据
    abCalcFun(adata, bdata) {
      this.startPoint = adata;
      this.endPoint = bdata;
      if (adata.toString() && bdata.toString()) {
        let abLength = Math.abs(
          this.lineChartData.xData[bdata] - this.lineChartData.xData[adata]
        );
        let abPadControl =
          this.lineChartData.seriesData[adata] -
          this.lineChartData.seriesData[bdata];
        this.elData.abLength = abLength;
        this.elData.abPadControl = abPadControl;
        this.elData.abUniformLoss =
          this.elData.abPadControl /
          (this.elData.abLength > 1000
            ? this.elData.abLength / 1000
            : this.elData.abLength);
        this.$forceUpdate();
        // console.log("计算", abLength);
      }
    },
    clickParamVis() {
      //点击测试按钮
      this.testParamVis = true;
    },
    recoveryRatio() {
      //echarts 恢复比例
      this.$refs.lineChart.recoveryRatio();
    },
    dataZoomFun(val) {
      //重置缩放是否可以点击
      this.dataZoomVis = val;
    },
    ablineFun(type, value) {
      //a b线如果在视野外面, 可以操作 ,回到视野
      if (type === "a") {
        this.aLineShow = value;
      } else {
        this.bLineShow = value;
      }
    },
    showLine(type) {
      //显示a b线
      if (type === "a") {
        this.startPoint = this.$refs.lineChart.aPoint;
        this.abCalcFun(this.startPoint, this.endPoint);
        this.aLineShow = true;
      } else {
        this.endPoint = this.$refs.lineChart.bPoint;
        this.abCalcFun(this.startPoint, this.endPoint);
        this.bLineShow = true;
      }
    },
    lengthShowFun(e, type) {
      //长度显示, 1000以上是km ,以下是m
      if (e > 1000) {
        return this.fixFun(e / 1000, type);
      } else {
        return this.fixFun(e, type);
      }
    },
    fixFun(e, type) {
      if (!e && type === "blank") {
        return "";
      } else if (!e && e != 0) {
        return "-";
      } else if (e == 0) {
        return e;
      } else if (e == "-") {
        return "-";
      } else if (e == "null") {
        return "-";
      } else if (e == "-null") {
        return "-";
      } else {
        let num = parseFloat(e);
        let strData = num.toString();
        let splitData = strData.split(".");
        if (num % 1 === 0) {
          return num;
        } else if (splitData.length > 0) {
          if (splitData[1].length >= 4) {
            return parseFloat(num.toFixed(4));
          } else if (splitData[1].length === 3) {
            return parseFloat(num.toFixed(3));
          } else if (splitData[1].length === 2) {
            return parseFloat(num.toFixed(2));
          } else if (splitData[1].length === 1) {
            return parseFloat(num.toFixed(1));
          } else {
            return parseFloat(num);
          }
        } else {
          return num;
        }
      }
    },
    // 设置参考曲线
    setDefaultMeasure(){
      setDefaultMeasure(measureId).then((res) => {
        this.$message.success("参考曲线设置成功");
        this.defaultMeasureVis = true; // 不能再点击设置参考曲线
      });
    },
  }
}
</script>


<style scoped lang="scss">
.dashboard_editor_container {
  padding: 20px;
  background-size: 100% 100%;
  position: relative;
  width: 100%;
  height: calc(100vh - 85px);
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  .left_con {
    width: 250px;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .left_top_con {
      height: 49%;
      width: 100%;
      border: 1px solid #dfe6ec;
    }
    .left_bottom_con {
      height: 49%;
      width: 100%;
      border: 1px solid #dfe6ec;
    }
  }

  .right_con {
    // width: calc(100% - 320px);
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .right_top_con {
      height: 75%;
      width: 100%;
      // border: #dfe6ec 1px solid;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .chart_tow_top_con {
        width: 100%;
        display: flex;
        justify-content: center;
        border-top: 1px solid #dfe6ec;
        box-sizing: border-box;
        height: 55px;
      }
      .button_con {
        display: flex;
        padding: 10px;
        .hint_con {
          height: 100%;
          display: flex;
          align-items: center;
          color: #f40;
          padding-left: 50px;
        }
      }
      .right_chart_top_con {
        width: 100%;
        display: flex;
        justify-content: space-between;
        box-sizing: border-box;
        height: 55px;
        .device_info_con {
          display: flex;
          color: #1890ff;
          font-size: 16px;
          height: 100%;
          align-items: center;
          font-weight: 600;
        }
        .return_con {
          padding: 10px;
        }
      }
      .chart_con {
        height: calc(100% - 190px);
        width: 100%;
        border-top: 1px solid #dfe6ec;
        box-sizing: border-box;
      }
    }
    .right_bottom_con {
      width: 100%;
      height: 23%;
      display: flex;
      justify-content: space-between;
      .text_result_con {
        width: 22%;
        min-width: 320px;
        height: 100%;
        box-sizing: border-box;
        border: #dfe6ec 1px solid;
      }
      .right_bottom_right {
        width: 50%;
        height: 100%;
        color: #606266;
        background-color: #fff;
      }
    }
  }
}
.flex_con {
  display: flex;
  justify-content: center;
  align-content: center;
  width: 100%;
  min-width: 320px;
  height: calc(100% - 40px);
}
.param_result_title {
  width: 100%;
  height: 40px;
  background: rgba(30, 121, 186, 0.7);
  color: #fff;
  font-weight: 600;
  font-size: 13px;
  display: flex;
  align-items: center;
  padding: 0 5px;
  box-sizing: border-box;
}
.table_item_con {
  display: flex;
  height: 40px;
  width: 100%;
  box-sizing: border-box;
  font-size: 13px;
}
.table_item_big {
  display: flex;
  height: 33.3%;
  width: 100%;
  box-sizing: border-box;
  font-size: 13px;
  border-top: 1px solid #dfe6ec;
}
.table_left_con {
  width: 105px;
  height: 100%;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding-right: 5px;
  justify-content: center;
  border-right: 1px solid #dfe6ec;
  font-weight: 600;
  color: #606266;
}
.border_left {
  border-left: 1px solid #dfe6ec;
}
.table_last_con {
  width: 105px;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  padding-right: 5px;
  justify-content: center;
  border-right: 1px solid #dfe6ec;
  font-weight: 600;
  color: #606266;
}
.table_right_con {
  width: calc(100% - 105px);
  display: flex;
  align-items: center;
  padding-left: 5px;
  box-sizing: border-box;
  overflow: hidden;
  white-space: nowrap;
  font-size: 13px;
  justify-content: center;
  // color: #fff;
}
.height_100 {
  height: 100%;
}
.param_con {
  width: 22%;
  min-width: 320px;
  height: 100%;
  border: 1px solid #dfe6ec;
  border-radius: 3px;
  color: #606266;
  background: #fff;
  // padding: 5px 0;
  .param_item_con {
    width: 50%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .flex_param_con {
      display: flex;
      align-items: center;
      font-size: 13px;
      height: 25%;
      border-top: 1px solid #dfe6ec;
      .flex_title_con {
        padding: 0 5px;
        width: 55%;
        font-size: 13px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        border-right: 1px solid #dfe6ec;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        // background-color: rgba(30, 121, 186, 0.7);
        color: #606266;
        font-weight: 600;
      }
      .flex_text_con {
        padding: 0 5px;
        width: 45%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .border_right {
        border-right: 1px solid #dfe6ec;
      }
    }
  }
}
.right_bottom_left {
  width: 55%;
  height: 100%;
  border: #dfe6ec 1px solid;
  .el_table {
    cursor: pointer;
  }
  ::v-deep.el_table th.el-table__cell {
    background-color: rgba(30, 121, 186, 0.7) !important;
    color: #fff;
  }
  ::v-deep.el-table--medium .el-table__cell {
    padding: 3px 0 !important;
  }
  ::v-deep.el-table_1_column_1 {
    padding: 0 !important;
  }
}
.test_img_con {
  width: 30px;
  height: 30px;
}
.reference_con {
  margin-left: 10px;
}
.dia_log_con {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 99;
  .param_main_con {
    width: 30vw;
    background: #fff;
    padding: 25px 30px;
    border-radius: 8px;
    .param_top_con {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 15px 25px 20px;
      .param_title_con {
        width: 60%;
        font-size: 17px;
        font-weight: 600;
      }
    }
  }
}
.progress_con {
  width: 100%;
  padding: 10px;
  height: 50px;
  box-sizing: border-box;
}
</style>
